<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="TingGe Blog Agile agile JavaScript NodeJS">
  <meta name="author" content="TingGe<505253293@163.com>">
  <title>听歌实验室</title>
  <link type="image/x-icon" rel="shortcut icon" href="https://avatars3.githubusercontent.com/u/4074517?v=3&s=40" />
  <link rel="stylesheet" type="text/css" href="/lib/bootstrap/dist/css/bootstrap.min.css" media="screen">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  <link href="/css/landing-page.css" rel="stylesheet">
  <link href="/css/screenshots.css" rel="stylesheet">
  <style media="screen">
    #main {
      padding-top: 55px;
    }
  </style>
  <script type="text/javascript" src="/lib/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="/lib/html2canvas/dist/html2canvas.min.js"></script>
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
    <div class="container topnav">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand topnav" href="/">
          <i class="fa fa-flask icon-3x" aria-hidden="true"></i> 听歌实验室
        </a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="/html/js.html">JavaScript/NodeJS</a>
          </li>
          <li>
            <a href="/index.html#agile">敏捷/项目管理(Agile/PMP)</a>
          </li>
          <li>
            <a href="/html/cloud-bi.html">云商业智能(Cloud BI)</a>
          </li>
          <li>
            <a href="/html/iot.html">物联网(WoT/IoT)</a>
          </li>
          <li>
            <a href="/html/me.html">关于我</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>
  <div id="main" class="container">
    <div class="row">
      <div id="article" class="col-md-9 content-container">
        <h1 id="-">前端组织思考</h1>
<h2 id="-">技术小组</h2>
<h3 id="-">中后台</h3>
<ul>
<li>提效：全链路研发工具和最佳实践。包括组件生态、协议规约、UI 组件和编排</li>
<li>稳定：规范、审查、单测、持续集成测试和线上监控</li>
<li>品质：用户体验和品牌打造。另外，体验度量（模型和工具）</li>
</ul>
<h3 id="-">开发者服务</h3>
<blockquote>
<p>端能力、工程能力及云基础设施的整合。</p>
</blockquote>
<p>解决如技术架构从零开始，后续技术升级演进乏力，技术跟不上业务等痛点。</p>
<ul>
<li>小程序</li>
<li>开发者工作台</li>
<li>快速开发跨平台 App 的解决方案</li>
<li>工程中台：前端工程链路的各环节打通</li>
</ul>
<h3 id="-node-js">泛 Node.js</h3>
<ul>
<li>含 Node.js 应用治理和 DevOps 的统一解决方案</li>
<li>与传统后端相比，Node.js 需深度发展安全、稳定性、性能</li>
<li>WoT/IoT 方向：全链路开发工具链和最佳实践；切入前端（JavaScript）与物联网交集的深度和广度</li>
</ul>
<h3 id="-">智能化</h3>
<blockquote>
<p>基础体系和样板工程</p>
</blockquote>
<h3 id="-">图形技术</h3>
<blockquote>
<p>倒三角技术栈、协同策应，实现技术栈收敛统一，提升工程研发效能</p>
</blockquote>
<ul>
<li>可视化效能、领域推动</li>
<li>数据可视化：<ul>
<li>底层通用基础模块</li>
<li>通用基础图形类库</li>
<li>设计资源共享，统一可视化设计基础规范，提升产品质量和用户体验</li>
<li>最佳实践</li>
</ul>
</li>
<li>3D 方向：<ul>
<li>3D + AR</li>
</ul>
</li>
</ul>
<h3 id="-">跨端技术</h3>
<blockquote>
<p>重点：多端兼容</p>
</blockquote>
<ul>
<li>H5 增强：PWA、AMP、MIP</li>
<li>Hybrid App：微信小程序、支付宝小程序、快应用</li>
<li>跨端容器：Webview 内核、Rax、Weex 生态、钉钉微应用</li>
<li>智能终端：POS、大屏、OTT 等带屏设备</li>
</ul>
<h2 id="-">前端规范</h2>
<h3 id="-">前端规范</h3>
<ul>
<li>编码规范：<ul>
<li>HTML</li>
<li>CSS、Less、Sass</li>
<li>JavaScript、ECMAScript 6、TypeScript</li>
<li>React</li>
<li>前端日志规约</li>
<li>Node 应用开发规约</li>
</ul>
</li>
<li>工程规约：Git 提交日志格式规约</li>
<li>安全规约：前端安全编码规约、前端通信规约</li>
<li>质量标准：浏览器分级、无线页面性能标准</li>
<li>工程流程保障：EsLint、TsLint</li>
</ul>
<h3 id="useragent-">UserAgent 规范</h3>
<h3 id="jsbridge-">JSBridge 规范</h3>
<h2 id="jobmodel">JobModel</h2>
<table>
<thead>
<tr>
<th>开发</th>
<th>高级</th>
<th>专家</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="-roadmap">学习 RoadMap</h2>
<ul>
<li>前端体系化培训、技术大会</li>
</ul>
<h2 id="-">前端组织</h2>
<blockquote>
<p>仿 W3C 和 ECMAScript 组织的委员会机制。</p>
<p>推动技术前瞻，协同竞争、技术收敛、简单务实。</p>
</blockquote>
<ul>
<li><p>愿景、使命和原则</p>
</li>
<li><p>运作机制</p>
</li>
<li><p>技术目标</p>
<p>标准：技术前瞻（技术域、领域大图）</p>
<p>治理：开发者生态（体系、专项治理）</p>
<p>生态：集体成长</p>
</li>
<li><p>成员列表</p>
</li>
</ul>

      </div>
      <div class="col-md-3" style="padding-top:20px;">
        <iframe src="http://githubbadge.appspot.com/tingge?a=0" style="border: 0;height: 142px;width: 200px;overflow: hidden;" frameBorder="0"></iframe>
      </div>
    </div>
  </div>
  <a id="html2canvas" title="截图下载-快照">&nbsp;</a>
  <script src="/lib/bootstrap/dist/js/bootstrap.min.js"></script>
  <script src="/js/article.js" charset="utf-8"></script>
  <!-- justice.js https://github.com/okor/justice  -->
  <script src="/lib/justice.min.js" charset="utf-8"></script>
  <!-- instantclick -->
  <script src="/lib/instantclick.js" charset="utf-8"></script>
  <script type="text/javascript" data-no-instant>
    Justice.init();
  </script>
</body>

</html>
